<template>
  <div class="wrapper">
    <div id="r2" style="width: 100%; height: 100%"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  name: "righttwo",
  mounted() {
    this.getList();
  },
  methods: {
    getList() {
      // 基于准备好的dom，初始化echarts实例
      const chartDom = document.getElementById("r2");
      const myChart = echarts.init(chartDom);
    window.addEventListener("resize", function () {
        myChart.resize();
      });
      var option = {
        title: {
          text: "世界每周新增治愈和死亡人数",
          left: "50%",
          textAlign: "center",
          textStyle: {
            color: "#fff",
            fontSize: "20",
          },
        },
        grid: {
          top: "20%",
          right: "10%",
          left: "15%",
          bottom: "10%",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            lineStyle: {
              color: "#ddd",
            },
          },
          backgroundColor: "rgba(255,255,255,1)",
          padding: [5, 8],
          textStyle: {
            color: "#7588E4",
          },
          extraCssText: "box-shadow: 0 0 5px rgba(0,0,0,0.3)",
        },
        legend: {
          top: "10%",
          left: "center",
          right: 20,
          textStyle: {
            color: "#fff",
            fontSize: "15",
          },
          data: ["今日", "昨日"],
        },
        xAxis: {
          type: "category",
          data: [
            "00:00",
            "2:00",
            "4:00",
            "6:00",
            "8:00",
            "10:00",
            "12:00",
            "14:00",
            "16:00",
            "18:00",
            "20:00",
            "22:00",
          ],
          boundaryGap: false,
          //   splitLine: {
          //     show: true,
          //     interval: "auto",
          //     lineStyle: {
          //       color: ["#D4DFF5"],
          //     },
          //   },
          axisTick: {
            show: false,
          },
          axisLine: {
            lineStyle: {
              color: "#609ee9",
            },
          },
          axisLabel: {
            margin: 10,
            textStyle: {
              fontSize: 14,
            },
          },
        },
        yAxis: {
          type: "value",
          axisTick: {
            show: false,
          },
          axisLine: {
            lineStyle: {
              color: "#609ee9",
            },
          },
          axisLabel: {
            margin: 10,
            textStyle: {
              fontSize: 14,
            },
          },
        },
        series: [
          {
            name: "今日",
            type: "line",
            smooth: true,
            showSymbol: false,
            symbol: "circle",
            symbolSize: 6,
            data: [
              "1200",
              "1400",
              "1008",
              "1411",
              "1026",
              "1288",
              "1300",
              "800",
              "1100",
              "1000",
              "1118",
              "1322",
            ],
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "rgba(199, 237, 250,0.5)",
                    },
                    {
                      offset: 1,
                      color: "rgba(199, 237, 250,0.2)",
                    },
                  ],
                  false
                ),
              },
            },
            itemStyle: {
              normal: {
                color: "#f7b851",
              },
            },
            lineStyle: {
              normal: {
                width: 3,
              },
            },
          },
          {
            name: "昨日",
            type: "line",
            smooth: true,
            showSymbol: false,
            symbol: "circle",
            symbolSize: 6,
            data: [
              "1200",
              "1400",
              "808",
              "811",
              "626",
              "488",
              "1600",
              "1100",
              "500",
              "300",
              "1998",
              "822",
            ],
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "rgba(216, 244, 247,1)",
                    },
                    {
                      offset: 1,
                      color: "rgba(216, 244, 247,1)",
                    },
                  ],
                  false
                ),
              },
            },
            itemStyle: {
              normal: {
                color: "#58c8da",
              },
            },
            lineStyle: {
              normal: {
                width: 3,
              },
            },
          },
        ],
      };
      myChart.setOption(option);
    },
  },
};
</script>

<style lang="scss" scoped>
.wrapper {
  width: 100%;
  height: 100%;
}
</style>